<template>
	<view class="settingBox">
		<view class="itembox">
			<view class="item">
				<text>门店LOGO</text>
				<view class="logoImage flex-y-center" @click="uploadImg">
					<text class="iconfontPT icontianjia"></text>
					<image v-if="shopdata.logo" :src="`${host}${shopdata.logo}`" mode="aspectFill"></image>
				</view>
			</view>
			<view class="item">
				<text>门店分类</text>
				<picker @change="chooseShopType" :range="classlist">
					<label class="">{{classlist[index]}}</label>
				</picker>
			</view>
			<view class="">
				<text class="block">门店图片</text>
				<imageUpload checkType="md" v-model="image" />
			</view>
			<view class="item">
				<text>联系人名字</text>
				<input type="text" v-model="shopdata.fzr_name" />
			</view>
			<view class="item">
				<text>商家名称</text>
				<input type="text" v-model="shopdata.title" />
			</view>
			<view class="item">
				<text>联系电话</text>
				<input type="text" v-model="shopdata.phone" />
			</view>
			<view class="item">
				<text>人均消费</text>
				<input type="text" v-model="shopdata.uniformity" placeholder="请输入人均消费(元)" />
			</view>
			<view class="item" @click="handleChooseLocation">
				<text>详细地址</text>
				<text class="text-overflow">{{shopdata.address}}</text>
			</view>
			<view class="item">
				<text>经营理念</text>
				<input type="text" v-model="shopdata.purpose" placeholder="味觉盛宴,顾客至上" />
			</view>
		</view>

		<view class="add" @click="updateSetting">
			<text>确认修改</text>
		</view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
	</view>


</template>

<script>
	import {
		loginOut,
		editStore,
		editStorePost
	} from "../../apis/shop/api.js"
	import imageUpload from '../components/public/upload-gallery.vue'

	export default {
		data() {
			return {
				store_id: "",
				token: "",
				shopdata: {
					purpose:'味觉盛宴,顾客至上',
					logo:''
				},
				classlist: ['火锅', '中餐'],
				classid: [],
				index: 0,
				image: [],
				class_id: "",
				
			}
		},
		computed:{
			host(){
				return this.$baseHost.car
			}
		},
		components: {
			imageUpload
		},
		onLoad() {
			this.store_id = uni.getStorageSync("store_id");
			this.token = uni.getStorageSync("token");
			this.getData()
		},	
		methods: {
			handleChooseLocation() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						_this.shopdata.latitude=res.latitude
						_this.shopdata.longitude=res.longitude
						_this.shopdata.address = res.address
					},
				})
			},
			handleChooseImage(item, list) {
				this.image = list
			},
			chooseShopType(e) {
				this.index = e.target.value;
				this.class_id = this.classid[this.index]
			},
			updateSetting() {
				let that = this
				that.shopdata.img = this.image.join(',');
				that.shopdata.class_id = this.class_id;
				that.shopdata.token = that.token;
				that.shopdata.purpose=that.shopdata.purpose?that.shopdata.purpose:'味觉盛宴,顾客至上';
			
				editStorePost(that.shopdata).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "修改成功"
						})
						let pages = getCurrentPages(); // 当前页面
						let prePage = pages[pages.length - 2]; // 前一个页面
						prePage.setData({ //把需要回传的值保存到上一个页面
							isDoRefesh: true
						});
						uni.navigateBack({
							delta: 1,
						});
					} else {
						uni.showToast({
							title: res.msg
						})
					}

				})
			},
			uploadImg() {
				let that = this
				that.$loading.show()
				this.$uploadImage({
						imageCompressFn: this.$refs.imageCompress.start
					})
					.then(res => {
						that.$loading.hide()
						that.shopdata.logo = res;
					})
			},
			getData() {
				let that = this
				editStore({
					id: that.store_id,
					token: that.token
				}).then(res => {
					if (res.code == 1) {
						that.shopdata = res.data.row;
						that.classlist = [];
						that.classid = [];
						that.image = res.data.row.img.split(',')
						for (var i in res.data.class) {
							that.classlist.push(res.data.class[i]);
							that.classid.push(i)
						}
					}
				})
			},

		}
	}
</script>

<style lang="less">
	.settingBox {
		background-color: #f8f8f8;
	}

	.logoImage {
		float: right;
		width: 84rpx;
		height: 84rpx;
		background-color: #eee;
		border-radius: 84rpx;
		position: relative;

		.icontianjia {
			font-size: 40rpx;
			line-height: 84rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			color: #ddd;
			transform: translate(-50%, -50%);
		}

		image {
			width: 84rpx;
			height: 84rpx;
			border-radius: 84rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 111;
		}
	}

	.uploaaimgbox {
		width: 120rpx;
		height: 120rpx;
		background-color: #eee;
	}

	.itembox {
		margin-top: 16rpx;
		background-color: #fff;
		padding: 0 30rpx;

		.item {
			&+.item {
				border-top: 1rpx solid #C7BEBE;
			}

			&::after {
				content: "";
				display: block;
				height: 0;
				overflow: hidden;
				clear: both;
			}

			input {
				height: 44rpx;
				padding: 22rpx 0;
				text-align: left;
				text-indent: 20rpx;
			}

			&>text {

				line-height: 88rpx;

				&.updateMsg {
					color: #E41805 !important;
				}

				&:nth-child(1) {
					margin-right: 50rpx;
					width: 200rpx;
					font-size: 30rpx;
					color: #333;
					float: left;
				}

				&.linian {
					line-height: 44rpx;
					padding: 22rpx 0;
				}

				&:nth-child(2) {
					font-size: 30rpx;
					color: #333;
					float: right;
					max-width: calc(~"100% - 250rpx");
					overflow: hidden;
				}
			}

			image {
				float: right;
				width: 84rpx;
				height: 84rpx;
			}

			picker {
				line-height: 88rpx;
				text-align: right;
			}
		}

		.imgbox {
			display: block;
			width: 100%;

			image {
				width: 220rpx;
				height: 220rpx;
				float: left;
				margin-left: 30rpx;
			}
		}
	}

	.add {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 166rpx;
		padding: 30rpx;
		box-shadow: -1px -2px 7px 0px rgba(0, 0, 0, 0.1);

		text {
			display: block;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #E41805;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
		}

	}
</style>
